<template>
	<view class="fashion">
		<view class="pageHead dFlex jBetween_aCenter" :style="{'padding-top':header_top+'px'}">
			<u-search placeholder="你在找什么？" bgColor='#ffffff' borderColor='#c6ccdd' shape='square' :showAction='false'></u-search>
			<view class="like">
				<u-icon name="../static/images/xinyuan.png" size="28"></u-icon>
			</view>
		</view>
		<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5" bgColor="#ffffff" ></u-swiper>
		<view class="kind">
			<swiper class="swiper" style="height:190px;" :circular='false' :indicator-dots="false" :autoplay="false" :display-multiple-items='4' >
				<swiper-item v-for="(item,index) in 10" :key='index' style="width: 64.5px;">
					<view class='kindOne'>
						<view class="kindIcon imgPublic">
							<image src="../static/images/kind.png" mode="widthFix"></image>
						</view>
						<text>分类分类</text>
					</view>
					<view class='kindOne'>
						<view class="kindIcon imgPublic">
							<image src="../static/images/kind.png" mode="widthFix"></image>
						</view>
						<text>分类分类</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="posts dFlex jAround_aCenter">
			<view class="poster imgPublic">
				<image src="../static/images/post.png" mode="widthFix"></image>
			</view>
			<view class="poster imgPublic">
				<image src="../static/images/post.png" mode="widthFix"></image>
			</view>
			<view class="poster imgPublic">
				<image src="../static/images/post.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="part">
			<view class="partTit">
				<view class="tit1">CARRY YOUR STYLE</view>
				<view class="tit2">there is a bag for everyone</view>
			</view>
			<view class="partContent">
				<view class='childPost dFlex jBetween_aStart'>
					<view class='child imgPublic'>
						<image src="../static/images/girlPost.png" mode="widthFix"></image>
					</view>
					<view class='child imgPublic'>
						<image src="../static/images/girlPost.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="hengShop">
			<view class="shopOne imgPublic" v-for="(item,index) in 10" :key='index'>
				<image src="../static/images/shop.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="classify1">
			<view class="kind_title">Deals on branded backpacks</view>
			<view class="kind_list">
				<view class="shopOne" v-for="(item,index) in 10" :key="index">
					<view class="shopImg imgPublic">
						<image src="../static/logo.png" mode="widthFix"></image>
					</view>
					<view class='shopInfo'>
						<view class="shopName">商品名称商品名称商品名称商品名称商品名称商品名称</view>
						<view class="shopPrice dFlex jStart_aCenter">
							<view class='newPrice'>SAR3440</view>
							<view class='oldPrice'>1234</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="partTit">
				<view class="tit1">STATIONERY SUPPLES</view>
				<view class="tit2">TO GET GOING</view>
			</view>
			<view class="partContent">
				<view class="hengShop">
					<view class="shopOne imgPublic" v-for="(item,index) in 10" :key='index'>
						<image src="../static/images/shop.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="more dFlex jBetween_aStart fWap">
			<view class="shopOne" v-for="(item,index) in 10" :key="index">
				<view class="shopImg imgPublic">
					<image src="../static/logo.png" mode="widthFix"></image>
				</view>
				<view class='shopInfo'>
					<view class="shopName">商品名称商品名称商品名称商品名称商品名称商品名称</view>
					<view class="shopPrice dFlex jStart_aCenter">
						<view class='newPrice'>SAR3440</view>
						<view class='oldPrice'>1234</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				header_top: getApp().globalData.header_top,
				header_height: getApp().globalData.header_height,
				// 轮播图
				list3: ['https://cdn.uviewui.com/uview/swiper/swiper3.png','https://cdn.uviewui.com/uview/swiper/swiper2.png','https://cdn.uviewui.com/uview/swiper/swiper1.png',],
			};
		}
	}
</script>

<style lang="scss">
	.more{
		width:100%;
		padding: 0 12px;
		box-sizing: border-box;
		.shopOne{
			.shopInfo{
				width:100%;
				padding: 5px;
				box-sizing: border-box;
				.shopPrice{
					font-size: 12px;
					.oldPrice{
						margin-left:12px;
						color:#7e8598;
						font-size:10px;
						text-decoration: line-through;
					}
				}
				.shopName{
					font-size:13px;
					width:128px;
					overflow:hidden;
					white-space: pre-wrap;
					word-wrap: break-word;
					text-overflow:ellipsis;
					display:-webkit-box;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2;
					margin-bottom: 5px;
				}
			}
			.shopImg{
				width:100%;
			}
			width:48%;
			margin-bottom: 12px;
		}
	}
	.classify1{
		width:100%;
		margin-top:12px;
		.kind_title{
			width:100%;
			padding:0 12px;
			box-sizing: border-box;
			// color:#404553;
			color:$main;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.kind_list{
			.shopOne{
				.shopInfo{
					width:100%;
					padding: 5px;
					box-sizing: border-box;
					.shopPrice{
						font-size: 12px;
						.oldPrice{
							margin-left:12px;
							color:#7e8598;
							font-size:10px;
							text-decoration: line-through;
						}
					}
					.shopName{
						font-size:13px;
						width:128px;
						overflow:hidden;
						white-space: pre-wrap;
						word-wrap: break-word;
						text-overflow:ellipsis;
						display:-webkit-box;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2;
						margin-bottom: 5px;
					}
				}
				.shopImg{
					width:100%;
				}
				width: 140px;
				padding: 0 6px;
				margin-right: 10px;
				box-sizing: border-box;
				display:inline-block;
			}
			width:100%;
			padding:0 12px;
			font-size: 16px;
			box-sizing: border-box;
			white-space: nowrap;
			overflow: hidden;
			margin-bottom: 10px;
			overflow-x: auto;
			
		}
		.kind_list::-webkit-scrollbar{
			height:0;
		}
	}
	.part{
		.partContent{
			width:100%;
			.childPost{
				.child{
					width:48%;
				}
				width:100%;
			}
		}
		.partTit{
			.tit1{
				font-size:16px;
				font-weight:bolder;
			}
			width:100%;
			margin-bottom: 10px;
		}
		width: calc(100% - 24px);
		margin: 12px auto;
	}
	.hengShop{
		width: 100%;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
		.shopOne{
			display:inline-block;
			width: 97.84px;
			margin-left: 12px;
		}
	}
	.posts{
		width:calc(100% - 24px);
		margin: 0 auto;
		.poster{
			width:calc((100% - 24px) / 3);
		}
		.poster:nth-child(2n){
			margin: 0 12px;
		}
	}
	.kind{
		swiper-item{
			display: inline-block;
			width: max-content;
			padding:0 5px;
			text-align: center;
			box-sizing:border-box;
		}
		.kindOne{
			.kindIcon{
				width:64.5px;
				height:64.5px;
				border-radius:50%;
				margin:0 auto 5px;
			}
			width:64.5px;
			display: inline-block;
			font-size:12px;
			margin-bottom: 10px;
		}
		width:calc(100% - 24px);
		margin:12px auto;
		overflow: hidden;
		overflow-x:auto;
	}
	page{
		background: white;
	}
</style>
